<template>
  <s-layout navbar="normal" :title="'项目'" :autoBack="false"
    :leftIconColor="`${headstate.color}`" :leftIcon="' '" :bgColor="headstate.bgColor"
    :titleStyle="{ color: `${headstate.color}`, fontSize: '32rpx', fontWeight: '600',zIndex:'99999' }" :onShareAppMessage="shareInfo">

    <view id="app"  class="background"
      :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff_v1/project_bg1@2.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
      <view class="area">
      
        <!-- 主要功能 -->
          <view class="major_function_box">
              <!-- 选择项目栏 -->
          <view class="project_cut">
            <view class="project_title" @tap="SelectItem">
              <view class="names">{{ PopupText }}
                <view class="cut_button">
                <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/project_icon_switch@2.png`" mode="scaleToFill" />
                <text>切换</text>
              </view>

              </view>
             
              </view>
          </view>

          <!-- 宣传语 -->
          <view class="tagline">
            中途虽有坎坷，远方必见彩虹
          </view>
          <view class="add_img">
            <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/project_pjicon@2.png`" mode="scaleToFill" />
          </view>
          <view class="menu_one">
            <view class="for_menu" v-for="(item, index) in menu_one" :key="index" @tap="skip(index)">
              <image :src="item.img" mode="scaleToFill" />
              <view class="title">{{ item.title }}</view>
            </view>
          </view>
          <view class="menu_two">
            <view class="module_item" @tap="goUrl('/subpackage/user/task/order_registration')">
              <view class="item_name">接单报名</view>
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_jiedanbaoming@2.png`" mode="scaleToFill"/></view>
            </view>
            <view class="module_item" @tap="goUrl('/subpackage/user/user/my_agent/my_agent')">
              <view class="item_name">我的代理</view>
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_wodedaili.png`" mode="scaleToFill"/></view>
            </view>
            <view class="module_item" @tap="goUrl('/subpackage/staff/user/payroll_record/payroll_record')" >
              <view class="item_name">发薪记录</view>
              <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/profile_icon_faxinjilu.png`" mode="scaleToFill"/></view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <fui-sticky range :top="`${safeAreaInsets?.top + 44}` ">
    <!-- <view class="project_List_box area"> -->
      <!-- 近期排班模块 -->
       <view :style="{background: `${headstate.bgColor}`,padding:`20rpx  0rpx`}">
          <view class="project_List_title "  >近期排班</view>
        </view>
      <!-- 缺醒图 -->
      <template v-slot:content>
        <view class="area">
          <view class="top_space" v-if="scheduleList.length == 0"
            style="width: 100%;height: 500rpx;background-color: #ffffff;border-radius: 20rpx;">
            <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
          </view>
          <view v-else>
            <view class="project_List_item" v-for="(item, index) in scheduleList" :key="index">
              <fui-sticky range :top="`${safeAreaInsets?.top + 80}` ">
                <view  :class="headstate.flex==false?'date':'stickydate date'">
                  <!-- 圆圈 -->
                  <view :class="index == 0 ? 'circle' : 'circle_two'">
                    <view :class="index == 0  ? 'inner_ring' : 'inner_ring_two'"></view>
                  </view>

                  <view class="ceiling">
                    {{ item.date }}
                  </view>
                </view>
                <template v-slot:content>
                <view class="combine" v-for="v in item.list" :key="v.id">
                  <view class="main_string"></view>
                  <view class="message_card">
                    <view class="item_title">{{ v.title }}</view>
                    <view class="flex">
                      <view>
                        <view class="Status_box">
                          <view class="blue"></view>
                          <view>班次时间：{{ v.start_time }}</view>
                        </view>
                        <view class="Status_box">
                          <view class="orange"></view>
                          <view>开始状态：<text :style="{ color: state_arr[v['state']]['color'] }">{{ state_arr[v['state']]['title']
                              }}</text></view>
                        </view>
                        <view class="Status_box">
                          <view class="orange"></view>
                          <view>排班日期：{{ item.date }}</view>
                        </view>
                      </view>
                      <view class="need" @click="classdetail(v)">查看所属需求</view>
                    </view>
                    <!-- 人数 -->
                    <view class="number_of_people_box">
                      <view class="item_box">
                        <view class="num">{{ v.total_num }}</view>
                        <view class="number_of_people_text">需求人数</view>
                      </view>
                      <view class="item_box">
                        <view class="num">{{ v.apply_num }}</view>
                        <view class="number_of_people_text">报名人数</view>
                      </view>
                      <view class="item_box">
                        <view class="num">{{ v.clockin_num }}</view>
                        <view class="number_of_people_text">打卡人数</view>
                      </view>
                    </view>
                    <!-- 按钮集合 -->
                    <view class="button_box">
                      <view class="button_hollow" @click="cancellation(v)"
                        v-if="v.state !== 1 || v.state !== 0"
                      ><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/project_icon_baofei@2.png`" mode="scaleToFill" />作废</view>
                      <view  v-if="v.remit_id" class="button_hollow" @click="progress_display(v)"><image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/project_icon_faxinjilu@2.png`" mode="scaleToFill" />查看进度</view>
                      <view  class="button_solid" @tap="onShareGoods(v)"  v-if="v.state == 1 || v.state == 0">
                        <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/project_icon_fenxiang@2.png`" mode="scaleToFill" />分享招人</view>
                    </view>
                  </view>
                </view>
                </template>
              </fui-sticky>
              </view>
            </view>
            <!-- 正在加载组件 -->
            <view>
              <s-loadmore-gather :current_page="current_page" :last_page="last_page" ref="loadmoreRef"></s-loadmore-gather>
            </view>
          </view>
     
      </template>
    <!-- </view> -->
    </fui-sticky>

  </s-layout>
  <!-- 底部弹出组件 && 部门弹出 -->
  <s-project-class @selectedData="switchTitle" :arrayList="projectDataList" ref="popupListRef" :searchBoxIsShow="false"
    :showGoLink="'#'"></s-project-class>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import dayjs from 'dayjs';
import { showShareModal } from '@/sheep/hooks/useModal';
import { onReady, onLoad, onShow, onPageScroll, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import { baseUrl } from "@/sheep/config";
const { safeAreaInsets } = uni.getSystemInfoSync();
  //页面跳转
  const goUrl = (url)=>{
    if(url){
      sheep.$router.go(url);
    }else{
      sheep.$helper.toast('暂时没有开通')
    } 
  }
const switch_port = ref('staff')
const date = reactive({
  today: '',
  tomorrow: '',
  yestoday:''
});
const state = reactive({
  titleStyle: {
    color: '#ffffff',
    fontWeight: 700
  },
  bgColor: 'rgba(0,0,0,0)'
})
const title = ref('项目')
const scheduleList = ref([]);
date.today = dayjs().format('YYYY-MM-DD');
date.tomorrow = dayjs().add(1, 'day').format('YYYY-MM-DD');
date.yestoday = dayjs().subtract(1, 'day').format('YYYY-MM-DD');
onLoad(() => {
  let params = {
    is_all: '0',
    is_include_main: '0'
  }
  projectList(params);
  
});
// 吸顶
const scrollTop = ref(0);
const headstate = ref({
  bgColor: 'rgba(0,0,0,0)',
  color: '#fff',
  title:'',
  flex:false
})
onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
  //  //当距离大于20的时候吸顶
  if (scrollTop.value > 0) {
    headstate.value.flex = true
     headstate.value.bgColor = '#fff'
    headstate.value.color = '#333'
  } else {
    headstate.value.flex = false
    headstate.value.bgColor = 'rgba(0,0,0,0)'
    headstate.value.color = '#fff'
  }
});
// 菜单栏数据 1
const menu_one = ref([
  {
    title: "当日排班",
    img: `${baseUrl}/uploads/uniapp_image/staff_v1/project_qiandao@3x.png`,
    url: '/pages/user/task/task',
  },
  {
    title: "长期排班",
    img: `${baseUrl}/uploads/uniapp_image/staff_v1/project-paiban@3x.png`,
    url: '/subpackage/user/index/menu_list',
  },
  {
    title: "班次管理",
    img: `${baseUrl}/uploads/uniapp_image/staff_v1/project_kaoqin@3x.png`,
    url: '/subpackage/user/index/submitted_resume',
  },
  {
    title: "考勤数据",
    img: `${baseUrl}/uploads/uniapp_image/staff_v1/project_banci@3x.png`,
    url: '/subpackage/user/index/menu_list',
  },
]);

//分享招人
const share = ref({
  title: '',
  address: '',
  date: '',
  id: '',
  employeeNeeds: ''
})


onPullDownRefresh(() => {
  current_page.value = 1
  scheduleList.value = []
	getScheduleList()
	setTimeout(() => {
		uni.stopPullDownRefresh()
	}, 500);
})

// 作废按钮
const cancellation = (v) => {
  uni.$u.throttle(() => {
    let params = {
      ids: v.id
    }
    sheep.$api.project.scheduleCancel(params).then((res) => {
      sheep.$helper.toast(res.msg);
      if (res.code == 1) {
        setTimeout(function () {
          scheduleList.value = []
          page.value = 1
          getScheduleList();
        }, 1000);
      }
    });
  }, 1000);
}

// /移除HTML标签
const delTag = (str) => {
  return str.replace(/<[^>]+>/g, "");
}
const onShareGoods = (item) => {
  let htmlContent = delTag(item.demand)
  share.value.title = item.title
  share.value.address = item.address
  share.value.id = item.id
  share.value.date = `${item.date}` + ' ' + `(${item.start_time + '~' + item.end_time})`
  share.value.employeeNeeds = htmlContent
  showShareModal();
}

const shareInfo = computed(() => {
  return sheep.$platform.share.getShareInfo(
    {
      title: share.value.title,
      desc: share.value.address,
      params: {
        page: '3',
        query: share.value.id
      },
    },
    {
      type: 'clock_in', // 商品海报
      title: share.value.title,
      desc: share.value.address,
      signUpTime: share.value.date,
      employeeNeeds: share.value.employeeNeeds,
   
    },
  );
});

// 点击跳转
const skip = (index) => {
  switch (index) {
    case 0:
      uni.navigateTo({
        url: '../../../subpackage/staff/project/arrange?title=当日排班&tabs=0'
      });
      break;
    case 1:
      uni.navigateTo({
        url: '../../../subpackage/staff/project/arrange?title=长期排班&tabs=1'
      });
      break;
    case 2:
      uni.navigateTo({
        url: `../../../subpackage/staff/project/classes/classes?title=班次管理&id=${PopupId.value}&project_name=${PopupText.value}`
      });
      break;
    case 3:

      uni.navigateTo({
        url: `../../../subpackage/staff/project/attendance_list?title=考勤数据&id=${PopupId.value}&project_name=${PopupText.value}`
      });
      break;
  }
};
//点击详情
const classdetail = (v) => {
  sheep.$router.go('/subpackage/staff/project/classes/classes_detail', {
    ids: v.id,
  });
}

// 跳转到打款详情
const progress_display = (v) => {
  sheep.$router.go('/subpackage/staff/workbench/remittance/remittance_details', {
    ids: v.remit_id,
    page:'approval'
  });
}

// 获取排班管理数据
const current_page = ref()
const last_page = ref()
const page = ref(1)
const getScheduleList = async () => {
  let params = {
    page: page.value,
    filter: JSON.stringify({
      date: `${date.yestoday},${date.today},${date.tomorrow}`,
      department_id: PopupId.value,
      state:'0,1,2,3'
    }),
    op: JSON.stringify({
      date: 'in',
      department_id: '=',
      state:'in'
    }),
  };
  const res = await sheep.$api.project.getScheduleList(params);
  if (page.value > 1) {
    if (scheduleList.value[scheduleList.value.length - 1].date == res.data.rows[0].date) {
      res.data.rows.forEach(row => {
        const date = row.date
        const index = scheduleList.value.findIndex(item => item.date === date)
        if (index !== -1) {
          scheduleList.value[index].list.push(...row.list)
        }
      })
    }
    scheduleList.value = [...scheduleList.value, ...res.data.rows.slice(1)]
  } else {
    scheduleList.value = res.data.rows
    // scheduleList.value = [...scheduleList.value,...res?.data.rows]
  }
  current_page.value = res.data.current_page
  last_page.value = res.data.last_page
  // tabs.value[0].num = scheduleList.value.length   // 给 tabs 赋值
};

// 获取排班管理数据 分页
// 滚动触底事件 + 分页处理
const loadmoreRef = ref()

onReachBottom(() => {
  loadmoreRef.value.PopupScrolltolower()
  if (current_page.value < last_page.value) {
    page.value += 1;
  } else {
    return;
  }
  getScheduleList()
})

// 渲染数据
const tabs = ref([
  {
    num: 0,
    title: '班次',
    value: 0,
    CornerMark: '近两日',
  },
  {
    num: 0,
    title: '缺卡',
    value: 1,
    CornerMark: '近24小时',
  },
  {
    num: 0,
    title: '缺勤',
    value: 2,
    CornerMark: '近24小时',
  },
]);

// 状态转译
const state_arr = ref([
  {
    value: 0,
    title: '待开始',
    color: '#0038F7',
  },
  {
    value: 1,
    title: '进行中',
    color: '#35d420',
  },
  {
    value: 2,
    title: '已结束',
    color: '#F70000',
  },
  {
    value: 3,
    title: '已终止',
    color: '#F77500',
  },
  {
    value: 4,
    title: '已作废',
    color: '#000000',
  },
]);

// tab栏切换
const OfChoice = ref(0);
const SelectTabs = (value) => {
  OfChoice.value = value;
};


// 切换项目

const PopupText = ref();
const PopupId = ref();
//项目选择 // 切换项目------------------------
const SelectItem = () => {
  popupListRef.value.open()
};

const popupListRef = ref()
// 调用接口：获取项目列表
const projectDataList = ref([])
const projectList = async (params = null) => {
  const res = await sheep.$api.app.getDepartment(params);
  projectDataList.value = res.data;
  PopupText.value = res.data[0].childrens[0].name
  PopupId.value =res.data[0].childrens[0].id
    scheduleList.value = []
    page.value = 1
    getScheduleList();
};
// 项目id
const switchTitle = (data) => {
  PopupText.value = data.name
  // PopupText.value = data.jointTitles
  PopupId.value = data.id
  scheduleList.value = []
  getScheduleList();

}
</script>

<style scoped lang="scss">
page {
  width: 100%;
  height: 100%;
}

#app {
  background-size: 100%;
  width: 100%;
  background-repeat: no-repeat;
}

.area {
  width: calc(100% - 60rpx);
  margin: 0 30rpx;
}


// 主要功能盒子
.major_function_box {
  border-radius: 14px;
  background-color: #FFFFFF;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
  padding: 26rpx 30rpx 30rpx 30rpx;
  margin-top: 98rpx;
  // max-height: 364rpx;
  position: relative;
  .add_img{
    position: absolute;
    right: 10rpx;
    z-index: 2;
    top: -103rpx;
    width: 242rpx;
      height: 266rpx;
    image{
      width: 100%;
      height: 100%;
    }
  }
// 项目切换
.project_cut {
  width: 430rpx;
  // height: 120rpx;
  font-family: PingFangSC;
  color: $uni-text-color;
  font-weight: $uni-font-weight;
  font-size: 44rpx;
  font-style: normal;
  text-decoration: none;

  .project_title {
   .names{display: inline-block;}
    .cut_button{
      margin-left: 10rpx;;
      height: 28rpx;
      width: 86rpx;
      border-radius: 17rpx;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0.07%, rgba(0, 168, 255, 1) 100%);
      image {
      width: 16rpx;
      height: 16rpx;
      margin-right: 6rpx;

      }
      text{
        color: #FFFFFF;
        font-weight: 500;
        font-size: 22rpx;
      }
    }
    
  }
}

// 宣传语
.tagline {
  margin-top: 20rpx;
  font-family: PingFangSC;
  color: #666666;
  font-weight: $uni-font-weight;
  font-size: $uni-font-size-26;
  font-style: normal;
  text-decoration: none;
  margin-bottom: 36rpx;
}


  // 菜单栏
  .menu_one {
    display: flex;
    flex-wrap: wrap;

    .for_menu {
      width: 25%;
      height: calc(100% - 40rpx);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      image {
        width: 100rpx;
        height: 100rpx;
      }

      .title {
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: $uni-font-size-26;
        font-style: normal;
        text-decoration: none;
      }
    }
  }
}

// 列表盒子
// .project_List_box {


  // padding-bottom: 150rpx;
  .top_space {
    margin-top: 20rpx;
  }

  // 近期排班
  .project_List_title {
    padding-left: 14rpx;
    border-left: 4rpx solid #FF6120;
    border-radius: 1px;
    font-family: PingFangSC;
    color: $uni-text-color;
    font-weight: $uni-font-weight;
    font-size: 34rpx;
    font-style: normal;
    text-decoration: none;
    display: inline-block;
    line-height: 34rpx;
    margin-left: 30rpx;
    // margin-top: 20rpx;
  }

  // 列表项
  .project_List_item {
    :deep(.fui-sticky__wrap){
      .fui-sticky__fixed{
        z-index: 9 !important;
     
      }

    }
    .stickydate{
      display: flex;
      align-items: center;
      // margin-top: 20rpx;
      margin-bottom: 24rpx;
      font-family: PingFangSC;
      color: #666666;
      font-weight: 500;
      font-size: $uni-font-size-26;
      font-style: normal;
      text-decoration: none;
      background-color:#fff;
      margin:0rpx -30rpx;
      padding-left:30rpx;
      height:60rpx;
      // 外圈
      .circle {
        width: 20rpx;
        height: 20rpx;
        margin-right: 20rpx;
        border-radius: 50%;
        border: 2rpx solid #0038F7;
        position: relative;
      }
      // 内圈
      .inner_ring {
        width: 8rpx;
        height: 8rpx;
        background-color: #0038F7;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;        
      }
      .circle_two {
        width: 20rpx;
        height: 20rpx;
        margin-right: 20rpx;
        border-radius: 50%;
        border: 2rpx solid #FF6120;
        position: relative;
      }
      // 内圈
      .inner_ring_two {
        width: 8rpx;
        height: 8rpx;
        background-color: #FF6120;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;        
      }
    }
    // 日期
    .date {
      display: flex;
      align-items: center;
      // margin-top: 20rpx;
      margin-bottom: 24rpx;
      font-family: PingFangSC;
      color: #666666;
      font-weight: 500;
      font-size: $uni-font-size-26;
      font-style: normal;
      text-decoration: none;
      // 外圈
      .circle {
        width: 20rpx;
        height: 20rpx;
        margin-right: 20rpx;
        border-radius: 50%;
        border: 2rpx solid #0038F7;
        position: relative;
      }
      // 内圈
      .inner_ring {
        width: 8rpx;
        height: 8rpx;
        background-color: #0038F7;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;        
      }
      .circle_two {
        width: 20rpx;
        height: 20rpx;
        margin-right: 20rpx;
        border-radius: 50%;
        border: 2rpx solid #FF6120;
        position: relative;
      }
      // 内圈
      .inner_ring_two {
        width: 8rpx;
        height: 8rpx;
        background-color: #FF6120;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;        
      }
    }

    // 竖线
    .main_string {
      width: 2rpx;
      height: 500rpx;
      background-color: #cccccc;
      margin-right: 28rpx;
      margin-left: 11rpx;
    }

    // 信息卡片
    .message_card {
      padding: 30rpx 30rpx 20rpx 30rpx;
      width: calc(100% - 100rpx);
      margin-bottom: 20rpx;
      border-radius: 8px;
      background-color: #FFFFFF;
      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);

      .item_title {
        margin-bottom: 30rpx;
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: 700;
        font-size: $uni-font-size-big;
        font-style: normal;
        text-decoration: none;
      }

      .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .Status_box {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          font-family: PingFangSC;
          color: $uni-text-color;
          font-weight: 500;
          font-size: $uni-font-size-sm;
          font-style: normal;
          text-decoration: none;
          text-align: left;
        }

        .Status_box:last-child {
          margin-bottom: 0rpx;
        }

        .need {
          font-family: PingFangSC;
          color: #FF6120;
          font-weight: 550;
          font-size: $uni-font-size-sm;
          font-style: normal;
          text-decoration: none;
          text-align: right;
        }
      }

      // 人数盒子
      .number_of_people_box {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 30rpx;
        margin-bottom: 40rpx;

        .item_box {
          .num {
            font-family: PingFangSC;
            color: #666666;
            font-weight: 500;
            font-size: $uni-font-size-sm;
            font-style: normal;
            text-decoration: none;
            text-align: center;
          }

          .number_of_people_text {
            font-family: PingFangSC;
            color: #666666;
            font-weight: 500;
            font-size: $uni-font-size-sm;
            font-style: normal;
            text-decoration: none;
            text-align: center;
          }
        }
      }

      // 按钮盒子集合
      .button_box {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .button_hollow {
          display: flex;
          align-items: center;
          justify-content:center;
          font-family: PingFangSC;
          color: #FF6120;
          font-weight: 500;
          font-size: $uni-font-size-26;
          font-style: normal;
          text-decoration: none;
          text-align: center;
          line-height: 62rpx;
          width: 174rpx;
          height: 62rpx;
          border: 1px solid #FF6120;
          border-radius: 32rpx;
          margin-right: 20rpx;
          image {
            align-items: center;
            width: 28rpx;
            height: 28rpx;
            margin-right: 4rpx;
          }
        }

        margin_none {
          display: flex;
          align-items: center;
          justify-content:center;
          font-family: PingFangSC;
          color: #FF6120;
          font-weight: 500;
          font-size: $uni-font-size-26;
          font-style: normal;
          text-decoration: none;
          text-align: center;
          line-height: 62rpx;
          width: 174rpx;
          height: 62rpx;
          border: 1px solid #FF6120;
          border-radius: 32rpx;
          image {
            align-items: center;
            width: 28rpx;
            height: 28rpx;
            margin-right: 4rpx;
          }
        }

        .button_solid {
          display: flex;
          align-items: center;
          justify-content:center;
          font-family: PingFangSC;
          color: #FFFFFF;
          font-weight: 500;
          font-size: $uni-font-size-26;
          font-style: normal;
          text-decoration: none;
          text-align: center;
          line-height: 62rpx;
          border-radius: 32rpx;
          width: 174rpx;
          height: 62rpx;
          background: linear-gradient(90deg, rgba(247, 156, 0, 1) 0.07%, rgba(254, 89, 7, 1) 100%);
          image {
            align-items: center;
            width: 28rpx;
            height: 28rpx;
            margin-right: 4rpx;
          }
        }
      }
    }
  }
// }

// 线 和卡片外部盒
.combine {
  display: flex;
}

// 吸顶
.ceiling {

}

.orange {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  margin-right: 12rpx;
  background-color: #FF6120;
}


.blue {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  margin-right: 12rpx;
  background-color: $uni-color-primary;
}
.menu_two{
  margin: 30rpx 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .module_item{
    width: 196rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88rpx;
    border-radius: 16rpx;
    background-color: #FFFFFF;
    box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.05);
    .item_name{
        color: #333333;
        font-weight: 500;
        font-size: 22rpx;
        margin-right: 20rpx;
      }
    .image{
      width: 60rpx;
      height: 60rpx;
      image{
        width: 100%;
        height: 100%;
      }
     
    }
  }
}
</style>